<template>
  <div class="rbox">
    <div id="clock" class="lwindows"></div>
    <div id="001" class="rwindows"></div>
    <div id="002" class="rwindows"></div>
    <div class="fun">
      <div class="box">{{ message1 }}{{ message2 }}{{ message3 }}</div>
      <div class="switch">
      <div class="lswitch">
      <img src="../../../static/image/icons/led.png" width="80px" height="80px">
      <div class="rswitch">
        <p>灯光</p>
      <el-switch
        v-model="value1"
        active-text="开"
        inactive-text="关"
        @change = jd1
      >
      </el-switch>
      </div>
      </div>
      </div>
      <div class="switch">
      <div class="lswitch">
      <img src="../../../static/image/icons/sun.png" width="80px" height="80px">
      <div class="rswitch">
        <p>遮阳</p>
      <el-switch
        v-model="value4"
        active-text="开"
        inactive-text="关"
        @change=jd4
      >
      </el-switch>
      </div>
      </div>
      </div>
      <div>
        <img class="ra" v-bind:src="fireoffurl">
        <img class="ra" v-bind:src="airoffurl">
        <img class="ra" v-bind:src="thiefoffurl">
      </div>
      <div class="switch">
      <div class="lswitch">
      <img src="../../../static/image/icons/fan.png" width="80px" height="80px">
      <div class="rswitch">
        <p>风扇</p>
      <el-switch
        v-model="value2"
        active-text="开"
        inactive-text="关"
        @change=jd2
      >
      </el-switch>
      </div>
      </div>
      </div>
      <div class="switch">
      <div class="lswitch">
      <img src="../../../static/image/icons/sp.png" width="80px" height="80px">
      <div class="rswitch">
        <p>水泵</p>
      <el-switch
        v-model="value3"
        active-text="开"
        inactive-text="关"
        @change=jd3
      >
      </el-switch>
      </div>
      </div>
      </div>
      <div class="switch">
      <div class="lswitch">
      <img src="../../../static/image/icons/Beep.png" width="75px" height="75px">
      <div class="rswitch">
        <p>电铃</p>
      <el-switch
        v-model="value3"
        active-text="开"
        inactive-text="关"
        @change=jd3
      >
      </el-switch>
      </div>
      </div>
      </div>
    </div>
    <iframe
      id="iframeId"
      :src="url"
      frameborder="0"
      class="pc iframe"
      scrolling="auto"
      width="95%"
      height="400px"
    ></iframe>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
import axios from 'axios'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      key: '6962b9740d6248b5bcc23bc1e960172b',
      pos: '81.29,40.54',
      type: '1,3,8',
      message1: '',
      message2: '',
      message3: '',
      value1: true,
      value2: false,
      value3: false,
      value4: false,
      value: '',
      radio: '2',
      url: 'https://map.qweather.com/index.html',
      fireurl: '',
      airurl: '',
      thiefurl: '',
      fireoffurl: '../../../static/image/icons/fireoff.png',
      fireonurl: '../../../static/image/icons/fireon.png',
      airoffurl: '../../../static/image/icons/airoff.png',
      aironurl: '../../../static/image/icons/airon.png',
      thiefoffurl: '../../../static/image/icons/thiefoff.png',
      thiefonurl: '../../../static/image/icons/thiefon.png'
    }
  },
  methods: {
    weathertext() {
      var that = this
      axios({
        url: 'https://devapi.qweather.com/v7/indices/1d?',
        params: {
          key: this.key,
          location: this.pos,
          type: this.type
        },
        method: 'GET'
      }).then(function (res) {
        that.message1 = res.data.daily[0].text
        that.message2 = res.data.daily[1].text
        that.message3 = res.data.daily[2].text
      })
    },
    jd1: function () {
      if (this.value1 == true) {
        this.$http
          .post('/mqtt/mqtt', { target: 'LED', value: 1 })
          .then((res) => {
            this.temp = console.log(res)
          })
        console.log(this.value)
        console.log(this.radio)
      }
      if (this.value1 == false) {
        this.$http
          .post('/mqtt/mqtt', { target: 'LED', value: 0 })
          .then((res) => {
            this.temp = console.log(res)
          })
      }
    },
    jd2: function () {
      if (this.value2 == true) {
        this.$http
          .post('/mqtt/mqtt', { target: 'FAN', value: 1 })
          .then((res) => {
            this.temp = console.log(res)
          })
        console.log(this.value)
        console.log(this.radio)
      }
      if (this.value2 == false) {
        this.$http
          .post('/mqtt/mqtt', { target: 'FAN', value: 0 })
          .then((res) => {
            this.temp = console.log(res)
          })
      }
    },
    jd3: function () {
      if (this.value3 == true) {
        this.$http
          .post('/mqtt/mqtt', { target: 'SP', value: 1 })
          .then((res) => {
            this.temp = console.log(res)
          })
        console.log(this.value)
        console.log(this.radio)
      }
      if (this.value3 == false) {
        this.$http
          .post('/mqtt/mqtt', { target: 'SP', value: 0 })
          .then((res) => {
            this.temp = console.log(res)
          })
      }
    },
    jd4: function () {
      if (this.value4 == true) {
        this.$http
          .post('/mqtt/mqtt', { target: 'SUN', value: 1 })
          .then((res) => {
            this.temp = console.log(res)
          })
        console.log(this.value)
        console.log(this.radio)
      }
      if (this.value4 == false) {
        this.$http
          .post('/mqtt/mqtt', { target: 'SUN', value: 0 })
          .then((res) => {
            this.temp = console.log(res)
          })
      }
    },
    jd5: function () {
      if (this.value5 == true) {
        this.$http
          .post('/mqtt/mqtt', { target: 'BEEP', value: 1 })
          .then((res) => {
            this.temp = console.log(res)
          })
        console.log(this.value)
        console.log(this.radio)
      }
      if (this.value5 == false) {
        this.$http
          .post('/mqtt/mqtt', { target: 'BEEP', value: 0 })
          .then((res) => {
            this.temp = console.log(res)
          })
      }
    },
    jb1: function () {
    },
    jb2: function () {
    },
    jb3: function () {
    },
    drawChart001() {
      var chartDom = document.getElementById('001')
      var myChart = echarts.init(chartDom)
      var option

      var base = +new Date()
      var oneDay = 24 * 3600 * 1000
      var date = []

      var data = [Math.random() * 150]
      var now = new Date(base)

      function addData(shift) {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        date.push(now)
        data.push((Math.random() - 0.4) * 10 + data[data.length - 1])

        if (shift) {
          date.shift()
          data.shift()
        }

        now = new Date(+new Date(now) + oneDay)
      }

      for (var i = 1; i < 100; i++) {
        addData()
      }

      option = {
        title: {
          text: '相对湿度',
          left: 'center',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          boundaryGap: [0, '50%'],
          type: 'value'
        },
        series: [
          {
            name: '成交',
            type: 'line',
            smooth: true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
              normal: {}
            },
            data: data
          }
        ]
      }

      setInterval(function () {
        addData(true)
        myChart.setOption({
          xAxis: {
            data: date
          },
          series: [
            {
              name: '成交',
              data: data
            }
          ]
        })
      }, 500)

      option && myChart.setOption(option)
    },
    drawChart002() {
      var chartDom = document.getElementById('002')
      var myChart = echarts.init(chartDom)
      var option

      var base = +new Date()
      var oneDay = 24 * 3600 * 1000
      var date = []

      var data = [Math.random() * 75]
      var now = new Date(base)

      function addData(shift) {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        date.push(now)
        data.push(Math.random() - 0.5 + data[data.length - 1])

        if (shift) {
          date.shift()
          data.shift()
        }

        now = new Date(+new Date(now) + oneDay)
      }

      for (var i = 1; i < 60; i++) {
        addData()
      }

      option = {
        title: {
          text: '二氧化碳浓度',
          left: 'center',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          boundaryGap: [0, '50%'],
          type: 'value'
        },
        series: [
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
              normal: {}
            },
            data: data
          }
        ]
      }

      setInterval(function () {
        addData(true)
        myChart.setOption({
          xAxis: {
            data: date
          },
          series: [
            {
              name: '成交',
              data: data
            }
          ]
        })
      }, 1200)

      option && myChart.setOption(option)
    },
    drawClock() {
      var chartDom = document.getElementById('clock')
      var myChart = echarts.init(chartDom, 'dark')
      var option

      option = {
        series: [
          {
            name: 'hour',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[1, 'rgba(255,255,255,0.7)']],
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 15
              }
            },
            splitLine: {
              lineStyle: {
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 3,
                shadowOffsetX: 1,
                shadowOffsetY: 2
              }
            },
            axisLabel: {
              fontSize: 20,
              distance: 10,
              formatter: function (value) {
                if (value === 0) {
                  return ''
                }
                return value
              }
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 12,
              length: '55%',
              offsetCenter: [0, '8%'],
              itemStyle: {
                color: '#FFF',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: [0, '30%']
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: 'minute',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 8,
              length: '70%',
              offsetCenter: [0, '8%'],
              itemStyle: {
                color: '#FFF',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 20,
              showAbove: false,
              itemStyle: {
                borderWidth: 15,
                borderColor: '#FFF',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ['0%', '-40%']
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: 'second',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: 'bounceOut',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 4,
              length: '85%',
              offsetCenter: [0, '8%'],
              itemStyle: {
                color: '#FFF',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 15,
              showAbove: true,
              itemStyle: {
                color: '#FFF',
                shadowColor: 'rgba(255, 255, 255, 0.3)',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ['0%', '-40%']
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      }

      var timeUpdatedStatus = {
        second: false,
        minute: false,
        hour: false
      }

      function updateSeries(time, series, type) {
        var isCritical =
          Math.floor(time) === 0 || (type === 'second' && time === 1)
        if (isCritical && timeUpdatedStatus[type] === true) {
          timeUpdatedStatus[type] = false
          series.data[0].value = 0
          series.clockwise = true
          option.animationDurationUpdate = 0
          myChart.setOption(option, true)
        }
        series.data[0].value = time
        series.clockwise = true
        if (time === 0) {
          timeUpdatedStatus[type] = true
          series.clockwise = false
        }
      }

      setInterval(function () {
        var date = new Date()
        var second = date.getSeconds()
        var minute = date.getMinutes() + second / 60
        var hour = (date.getHours() % 12) + minute / 60

        updateSeries(second, option.series[2], 'second')
        updateSeries(minute, option.series[1], 'minute')
        updateSeries(hour, option.series[0], 'hour')

        option.animationDurationUpdate = 300
        myChart.setOption(option, true)
        date = null
      }, 1000)

      option && myChart.setOption(option)
    }
    // 输出Echarts图形
  },
  mounted() {
    this.weathertext()
    this.drawChart001()
    this.drawChart002()
    this.drawClock()
  }
}
</script>

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: white;
  /* background-color: #0527af; */
  line-height: 1.5;
}
.lwindows {
  width: 18%;
  height: 18rem;
  float: left;
  margin: 10px;
  /* background-image: url(../../../static/image/board1.png); */
  background-size: 100% 100%;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  border-radius: 10px;
}
.rwindows {
  width: 36%;
  height: 18rem;
  float: left;
  margin: 10px;
  /* background-image: url(../../../static/image/board1.png); */
  background-size: 100% 100%;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  border-radius: 10px;
}
.frame {
  margin-top: 15px;
  float: left;
  overflow-y: hidden;
}
.fun {
  width: 92.5%;
  height: 220px;
  float: left;
  margin: 10px;
  /* background-image: url(../../../static/image/board1.png); */
  background-size: 100% 100%;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  border-radius: 10px;
}
.box {
  width: 26%;
  height: 200px;
  margin: 10px;
  font-size: 20px;
  text-indent: 40px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1.5px;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  float: left;
}
.switch {
  width: 21%;
  height: 88px;
  margin: 10px;
  font-size: 22px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1.5px;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  float: left;
}
.lswitch {
  margin-left: 20px;
  float: left;
}
.rswitch {
  margin-left: 50px;
  float: right;
}
.rswitch p {
  margin-left: 20px;
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 0;
}
.box select {
  margin: 18px;
}
.el-switch__core{
    width:50px!important;
}
.ra{
  width: 105px;
  height: 105px;
  margin-right:20px;
}
</style>
